function previewController() {

	var mainlayout = $('.main-container'),
	// 移动设备
	mobileDevice = $(".tempo-story-expandBtn i:last"),
	// pc设备
	desktopDevice = $(".tempo-story-expandBtn i:first"), 
	// 场景面板渲染父容器
	boardContainer = $("#tempo-scene-boardcontainer"),
	//场景报告 
//	reportScene = new ReportScene();

	storyId = window[constant.STORY_ID],

	storyPager = new StoryPager();

	storyPager.storyId = storyId;
	// 当前故事的设备类型 默认为桌面
	var curStoryDevice = "desktop";

	/**
	 * 渲染整个面板的布局
	 */
	var renderMainLayout = function() {
		mainlayout.layout({
			south:{
				resizable:false,
				spacing_open:0,
				closable:true,
				size:32,
				spacing_closed:0 
			},
			center : {
				onresize : TempoUtils.throttle(function() {
					resizeCurBoard();
				},200,true)   
			},
		});
	}


	/**
	 * 加载当前故事下的所有场景
	 */
	var loadAllScenes = function() {
		var process = $("<div/>").tempoprogressbar();
		$.ajax({
			url : contextPath + "/api/bi/resource/analyse/list-scene",
			data : {
				id : storyId
			},
			dataType : 'json',
			type : 'post',
			success : function(result) {
				process.tempoprogressbar("destroy"); 
				if (!$.getters("success", result)){
					$("<div/>").alert({
						msg:$.getters("message", result)||TempoUtils.locale("bidesign.scene_query_fail")
					});
					return;
				}
				var scenes = result.data;
				storyPager.render(scenes);
				storyPager.visible(true, function(item){
					var dt = $(item).data("tempoStorypage");
					if(dt.device==curStoryDevice){
						return true;
					}
					return false;
				});
				storyPager.resizePager();
			},
			error:function(){
				process.tempoprogressbar("destroy");
			}
		})
	}

	/**
	 * 页签点击
	 */
	storyPager.registEvent("pagerClick", function(data) {
		// 获取点击页签前选中的面板
		var curBoardId = editState.getCurBoardId();
		curBoardId = data.id;
		// 设置当前选中的面板
		editState.setCurBoardId(curBoardId);
		// 加载页面
		loadBoard(curBoardId);
	});


	/**
	 * 用于处理编辑按钮的状态
	 */
	var editState = (function() {
		// 当前场景面板id
		var curBoardId = null,

		// 保存面板在加载之后的最后宽高，用于处理判断是否需要改变图形大小
		boardLastSize = {};

		return {
			// 设置当前场景的id
			setCurBoardId : function(id) {
				curBoardId = id;
			},
			// 获取当前场景的id
			getCurBoardId : function() {
				return curBoardId;
			},

			setLastSize : function(id, board) {
				boardLastSize[id] = {
						width : board.width(),
						height : board.height()
				}
			},
			// 获取最终大小
			getLastSize : function(id) {
				return boardLastSize[id];
			}
		}
	})();

	var loadBoard = function(){
		var curBoardInfo = null;
		var curBoardId = null;
		//加载报告对应的场景信息
		var loadReportContent = function loadReportContent(boardData){
			if(boardData.content){
				return new Promise(function(resolve,reject){
					resolve(boardData);
				});
			}
			return new Promise(function(resolve,reject){
				$.get(contextPath+"/api/bi/resource/scene/get",
						{id:boardData.id},
						function(result){
							if (!$.getters("success", result)){
								$("<div/>").alert({
									msg:$.getters("message", result)||TempoUtils.locale("bidesign.scene_open_fail")
								});
								return;
							}
							resolve(result.data);
						},'json');
			});
		}
		
		var getChartConfig = function(options){
			return window[options.type][options.nodeType];
		}
		
		
		var showChart = function(){
			var widgetName = this.attr("_widgetName"),
			toolbar = this[widgetName]("getToolbar");
			if(toolbar && $.isFunction(toolbar.disableAllBtns)){
				toolbar.disableAllBtns(false, []);
			}
		}
		
		var showExample = function(){
			var widgetName = this.attr("_widgetName"),
			toolbar = this[widgetName]("getToolbar");
			if(toolbar&&$.isFunction(toolbar.disableAllBtns)){
				toolbar.disableAllBtns(true, ['refresh']);  
			}
		}
		
		/**
		 * 面板渲染前删除一些多余的属性，如链接配置等
		 */
		var deleteProBeforeRender = function(options){
			options.parameters = options.parameters || {};
			options.parameters._isLink = false;
			options.parameters._isLinkUrl = false;
		}
		
		/**
		 * 渲染图形
		 */
		var renderChart = function(options,parent){
			var board = this;
			var chartOpt = new EchartModel();
			var config = getChartConfig(options);
			chartOpt.setOptions(options.chart);
			//获取缩放比例
			var zoomScale = board.chartboard("getShowScale"); 
			//获取当前主题
			var theme = board.chartboard("getTheme");
			options.chart = chartOpt;
			deleteProBeforeRender(options);
			
			var div = parent.find("#"+options.eid)[config.renderNode||'chartnode']({
				showHandle : false,
				draggable:false,
				resizable:false,
				closable:false, 
				selectable:true,  
				mode:'preview',
				data : options,
				zoomScale:zoomScale,
				buttons:[],  
				board:board,
				theme:theme,
				updateStyle:false,
				createAlignLine:false
			});  
		}

		//加载场景对应的页面内容
		var loadScene = function loadScene(board,boardId,noWaterMarker){
			// 加载面板对应js并进行渲染
			return new Promise(function(resolve,reject){
				var pro = $("<div/>").tempoprogressbar();
				$.ajax({
					url : contextPath + "/api/bi/resource/scene/get",
					data : {
						id : boardId
					},
					type : 'post',
					dataType : 'json',
					success : function(result) {
						if (!$.getters("success", result)){
							$("<div/>").alert({
								msg:$.getters("message", result)||TempoUtils.locale("bidesign.scene_open_fail")
							});
							return;
						}
						var params = result.data;
						var boardData = params.content ? $.parseJSON(params.content) : {};
						if (!tempotheme.isExist(boardData.theme)) {
							boardData.theme = tempotheme.getDefault();
						}
						if (params.code) {
							board.attr("_code", params.code);
						}
						board.chartboard({
							droppable : false,
							mode: 'preview',
							valign : __valign,
							data : boardData,
							renderChild : renderChart,
							device:curStoryDevice
						});
						board.chartboard('setWaterMark');
						pro.tempoprogressbar("destroy");
						resolve();
					},  
					error : function(error) {
						pro.tempoprogressbar("destroy");
						reject(error);
					}
				});
			});
		}

		//添加面板元素
		var addBoardEle = function addBoardEle(boardId){
			var boardEle =  $("<div/>", {
				id : boardId
			}).appendTo(boardContainer);
			$("<div/>", {
				class : "tempo-api-preview-scene-mask"
			}).appendTo(boardEle);
			return boardEle;
		}

		/**
		 * 隐藏场景
		 */
		var hideScene = function hideScene(boardId){
			var board = $("#"+boardId);
			if(board.length>0){ 
				board.hide();
			}
		}

		/**
		 * 隐藏报告
		 */
		var hideReport = function hideReport(reportId,recover){
			reportScene.hide(recover);
		}

		/**
		 * 显示场景面板
		 */
		var visibleBoard = function visible(boardId,noWaterMarker){
			var board = $("#"+boardId);
			if(board.length>0){
				return new Promise(function(resolve,reject){
					board.show();
					resizeCurBoard(boardId);
					resolve(boardId);
				})
			}else{
				board = addBoardEle(boardId); 
				return loadScene(board,boardId,noWaterMarker);
			}
		}


		/**
		 * 处理场景
		 */
		var dealScene = function dealScene(boardData){
			if(curBoardInfo!=null){
				if(curBoardInfo.type=='scene'){
					hideScene(curBoardInfo.id); 
				}else if(curBoardInfo.type=='report'){
					hideReport(curBoardInfo.id,true);
				}
			}
			curBoardInfo = boardData;
			curBoardId = boardData.id;
			visibleBoard(boardData.id).then(function(){ 
				var board = $("#"+boardData.id); 
				// 设置当前场景之后，回填当前场景的工具条选项
				// 加载图形的属性
				board.trigger("click");  
				// 设置画板的尺寸状态
				editState.setLastSize(boardData.id, boardContainer);
			});
		}

		/**
		 * 处理报告
		 */
		var dealReport = function dealReport(boardData,boardPage){
			if(curBoardInfo){
				if(curBoardInfo.type=='scene'){
					hideScene(curBoardInfo.id); 
				}else{
					hideReport(curBoardInfo.id,false);
				}
			}
			//加载报告场景
			loadReportContent(boardData).then(function(result){
				curBoardInfo = boardData;
				curBoardId = boardData.id;
				var content = result.content;
				if($.type(result.content)=='string'){
					content = JSON.parse(result.content);
				}
				boardData.content = content;
				var scenes = content.scenes||[];
				//将数据缓存到页签上，此时不需要直接调用方法更新boardData，而只需要更新对象引用
				boardPage.data("tempoStorypage",boardData);
				var allVisibleData = storyPager.getAllVisibleData();
				reportScene.show(content,boardData,{
					//报告内部调用方法，切换显示场景页
					visibleScene:function(boardId){
						visibleBoard(boardId, true).then(function(){
							boardPage.data("tempoStorypage",boardData);
						});
					}, 
					//报告内部调用方法，切换隐藏场景页
					hideScene:function(boardId){
						hideScene(boardId);
					},
					//待选场景
					selectScenes:allVisibleData.filter(function(data){
						return data.type=='scene'&&scenes.indexOf(data.code)==-1;
					}),
					//已选场景 
					selectedScenes:allVisibleData.filter(function(data){
						return scenes.indexOf(data.code)!=-1;
					}).sort(function(s1,s2){
						return scenes.indexOf(s1.code) - scenes.indexOf(s2.code);
					})
				});
			});

		}

		return function(boardId,clear){
			//如果重复点击同一个页签，则不处理
			if(curBoardId && curBoardId == boardId && clear!==true){
				return;
			}
			//获取面板数据
			var boardData = storyPager.getPageData(boardId);
			var boardPage = null;

			//如果是场景，按照场景方式展现
			if(boardData.type=='scene'){
				dealScene(boardData);
			}else if(boardData.type=='report'){
				boardPage = storyPager.findById(boardId);
				//如果是报告，按照报告方式展现
				dealReport(boardData,boardPage); 
			}
		}
	}();

	/**
	 * 调整当前面板大小 在切换标签页及调整页面大小都会调用此方法
	 */
	var resizeCurBoard = function(boardId) {
		var curBoardId = boardId||editState.getCurBoardId(), 
		lastSize = editState.getLastSize(curBoardId), 
		width = boardContainer.innerWidth(), 
		height = boardContainer.innerHeight();
		//如果是报告，则不需要调整大小 
		if(!lastSize){
			return;  
		}
		if (lastSize.width != width || lastSize.height != height) {
			var board = $("#" + curBoardId);
			board.chartboard("resize");
			editState.setLastSize(curBoardId, board);
		}
	}

	/**
	 * 显示对应设置的场景
	 */
	var visableScene = function(device){
		// 显示指定的类型
		storyPager.visible(true,function(item){
			var dt = $(item).data("tempoStorypage");
			if(dt.device==device){
				return true;
			} 
			return false;
		});
	};


	/**
	 * 切换设备
	 * @param device 设备类型
	 * @param code 要打开的场景编码
	 */
	var selectDevice = function(device){
		if(curStoryDevice!=device){
			curStoryDevice = device;
			visableScene(device);
			$(".tempo-scene-toolbar-device-select").removeClass("tempo-scene-toolbar-device-select");
			if(device=='mobile'){
				mobileDevice.addClass("tempo-scene-toolbar-device-select");
			}else{
				desktopDevice.addClass("tempo-scene-toolbar-device-select");
			}
		}
	}
	
	/*判断是否存在指定设备对应场景*/
	var hasDeviceScene = function(code,device){
		var find = storyPager.find(code,device);
		if(find){
			return find;
		}
		return new Promise(function(resove,reject){
			var process = $("<div/>").tempoprogressbar();
			$.ajax({
				 url:contextPath+"/scene/querySceneByCodeDevice",
				 data:{
					 storyId:storyId,
					 code:code,
					 device:device
				 },
				 type:'post',
				 dataType:'json',
				 error:function(error){
					 process.tempoprogressbar("destroy"); 
					 reject(error);
				 },
				 success:function(result){
					 process.tempoprogressbar("destroy"); 
					 resove(result);
				 }
			 });
		});
	}

	var bindTransEvent = function(){
		[mobileDevice,desktopDevice].forEach(function(item){
			item.on("click",function(){
				if(isConfigState()){
					var $this = $(this);
					var device = $this.attr("data-type");  
					if(curStoryDevice == device){
						return;
					}

					var  curBoardId = editState.getCurBoardId(),
					curPager = storyPager.findById(curBoardId),
					curPagerData = curPager.data("tempoStorypage")||{},
					curCode = curPagerData.code;
					selectDevice(device);
					// 指定当前故事的设备类型
					var find = hasDeviceScene(curCode,device);
					boardContainer.show();
					if(find){
						if(find instanceof Promise){
							find.then(function(result){
								if(result.find){
									storyPager.addPager(result.scene,true);
								}else{
									loadDefaultPage();
								}
							})
						}else{
							if(find.length!=0){
								storyPager.loadById(find.attr("linkId"));   
							}else{
								loadDefaultPage();
							}
						}
					}else{
						loadDefaultPage();
					}
				}
			})
		});
	}

	var isConfigState = function(){
		var curBoardId = editState.getCurBoardId();
		if(Eventbus.triggerHandler("getchartConfigConnState."+curBoardId)[0]){
			$("<div/>").alert({
				msg:TempoUtils.locale("bi.scene_connect_switch_device")
			})
			return false;
		}
		return true;
	}

	/**
	 * 切换设备时如果没有合适的场景页，则加载默认的场景页
	 */
	var loadDefaultPage = function(type){
		type = type||'scene';
		//如果还没有页面，则需要新增一页空页
		if(!storyPager.hasVisiblePage()){
			boardContainer.hide();
		}else{
			// 加载第一页
			storyPager.loadFirst();
		}
	}

	$(function(){
		bindTransEvent();
	}); 

//	获取当前面板数据
	function getCurrentBoardInfo(){
		var currentBoardId = editState.getCurBoardId();
		if(currentBoardId){
			return storyPager.getPageData(currentBoardId);
		}
		return null;
	}

	!function() {
		renderMainLayout();
		loadAllScenes();
		//页面大小调整后触发页签调整
		$(function(){
			$(window).on("resize",TempoUtils.throttle(function(){
				storyPager.resizePager();
			},200));
		})
	}();
}
